<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>管理系统</title>
  <link rel="stylesheet" th:href="@{/css/layui.css}">
</head>
<body class="layui-layout-body">
<button class="layui-btn" onclick="$('.add').show()">添加</button>
<div class="add" style="display: none">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">病名</label>
      <div class="layui-input-inline">
        <input type="text" name="name"  placeholder="病名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">医院</label>
      <div class="layui-input-inline">
        <input type="text" name="hospital"  placeholder="医院" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item" th:if="${isAdmin}">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text" name="username"  placeholder="用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">发生时间</label>
      <div class="layui-input-inline">
        <input name="happenTimeStr" type="text" class="layui-input" id="test1">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary" onclick="$('.add').hide()">取消</button>
      </div>
    </div>
  </form>
</div>
<table class="layui-hide" id="adminList" lay-filter="taskTable">

</table>
<script th:src="@{layui.js}"></script>
<script th:src="@{js/jquery-3.3.1.js}"></script>

<script type="text/javascript">
  layui.use(['table'], function(){
    var table = layui.table;//使用数据表格

    tableIns = table.render({
      elem: '#adminList',//选择html中对应的数据表格ID
      url:'/listCaseHistory',//分页提交到spring boot 代码的映射名称
      method:'post',
      limit:8,//每页显示的记录数量
      limits:[5,8,10,15,20],//可选择每页显示的数量
      page: true,//开启分页

      cols: [
        [
          {field:'id',title:'ID', width: 50},
          {field:'username',title:'姓名'},
          {field:'userIdentity',title:'身份证'},
          {field:'name',title:'病名'},
          {field:'hospital',title:'医院'},
          {field:'happenTimeStr',title:'发生时间'},
          {field:'createTime',title:'创建时间'},
          {fixed: 'right',title:'操作',width:150,
            templet: function(data){
              return "<a class=\"layui-btn layui-btn-xs\" lay-event=\"edit\">编辑</a>"+
                      "<a class=\"layui-btn layui-btn-danger layui-btn-xs\" lay-event=\"del\">删除</a>";
            }
          }
        ]
      ],
      done:function(res, curr, count){
        console.log("表格渲染完成：");
      }

    });

    table.on('tool(taskTable)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        layer.msg('ID：'+ data.id + ' 的查看操作');
      } else if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          obj.del();
          $.ajax({
            url:'/delCaseHistory',
            type:'get',
            async:false,
            data: {id: data.id},
            dataType:'json',
            success:function (data) {
              layer.msg(data.msg)
            }
          });
          layer.close(index);
        });
      } else if(obj.event === 'edit'){
        layer.open({
          type: 2
          ,title: '编辑'
          ,content: 'toEditCaseHistory'
          ,maxmin: true
          ,area: ['450px', '290px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            let body = layer.getChildFrame('body', index);  // body.html() body里面的内容

            let request = {}
            request.name  = body.find("#name").val()
            request.hospital = body.find("#hospital").val()
            request.happenTimeStr = body.find("#test1").val()
            request.id = body.find("#id").val()
            $.ajax({
              url:'/updateCaseHistory',
              type:'post',
              async:true,
              data: request,
              contentType:'application/x-www-form-urlencoded',
              success:function (data) {
                layer.msg(data.msg)
                window.parent.location.reload()
              }
            });

          }
          ,success: function(layero, index){
            let body = layer.getChildFrame('body', index);  // body.html() body里面的内容

            body.find("#name").val(data.name);  // 方式一
            body.find("#hospital").val(data.hospital)
            body.find("#test1").val(data.happenTimeStr)
            body.find("#id").val(data.id)
          }
        })
        // layer.alert('编辑行：<br>'+ JSON.stringify(data))
      }
    });
  });
  layui.use('laydate', function(){
    var laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
      elem: '#test1'
      ,done: function(value, date, endDate){
        console.log(value); //得到日期生成的值，如：2017-08-18
        console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
      }
    });

  });

  layui.use('form', function(){
    var form = layui.form;
    //监听提交
    form.on('submit(formDemo)', function(data){

      console.log(data.field)
      let request = data.field
      $.ajax({
        url:'/saveCaseHistory',
        type:'post',
        async:true,
        data: request,
        contentType:'application/x-www-form-urlencoded',
        success:function (data) {
          layer.msg(data.msg)
          window.parent.location.reload()
        }
      });

      // layer.msg(JSON.stringify(data.field));
      return false;
    });
  });



</script>
</body>